.fx-dialog {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;

  &.fx-transition-translateY-enter-active {
    transition: all 0.2s ease;
  }

  &.fx-transition-translateY-leave-active {
    transition: all 0.2s ease;
  }

  &.fx-transition-translateY-enter-from {
    transform: translateY(-50px);
    opacity: 0.5;
  }

  &.fx-transition-translateY-leave-to {
    transform: translateY(-50px);
    opacity: 0;
  }

  > .fx-dialog-inner {
    position: absolute;
    z-index: 10;
    background-color: $color-white;
    border-radius: $border-radius-default;
    box-shadow: $border-shadow;

    > .fx-dialog-title {
      cursor: move;
      padding: 20px 30px 10px 20px;
      font-size: 16px;
      position: relative;
      display: flex;
      align-items: center;

      > .close {
        position: absolute;
        right: 20px;
        top: 20px;
        cursor: pointer;
      }
    }

    > .fx-dialog-content {
      padding: 10px 20px;
    }

    > .fx-dialog-footer {
      padding: 10px 20px 20px;
    }
  }
}

.fx-dialog-modal {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: $modal-color;

  &.fx-transition-modal-enter-active {
    transition: all 0.15s ease;
  }

  &.fx-transition-modal-leave-active {
    transition: all 0.15s ease;
  }

  &.fx-transition-modal-enter-from {
    opacity: 0;
  }

  &.fx-transition-modal-leave-to {
    opacity: 0;
  }
}
